<template>
  <FrameLayout>
    <template v-slot:left>
      <Frame title="今日信息" style="height: 100%">
        <template v-slot:titleIcon><img src="@/assets/img/todyInfo.png" alt=""></template>
        <template v-slot:right>
          <div class="flex-row">
            <img
              class="more-icon"
              src="@/assets/img/rightIcon.png"
              alt=""
              srcset=""
              @click="$store.dispatch('dlgName', '矿山基本信息')"
            >
          </div>
        </template>
        <template v-slot:body>
          <TodayInfo />
        </template>
      </Frame>
    </template>
    <template v-slot:center>
      <div class="side-bars">
        <TwoThree />
        <span
          class="btn"
          @click="$store.dispatch('dlgName', '安全概览三维图层')"
        >图层</span>
      </div>
      <Dlgdiv
        v-if="$store.getters.dlgName === '矿山基本信息'"
        style="width: 20%; height: 40%; left: 22%; top: 15%"
      >
        <template v-slot:title>矿山基本信息</template>
        <template v-slot:body><BaseInfo /></template>
      </Dlgdiv>
      <Dlgdiv
        v-if="$store.getters.dlgName === '安全概览三维图层'"
        style="width: 10%; height: 30%; right: 22%; top: 20%"
      >
        <template v-slot:title>图层</template>
        <template v-slot:body><DlgLayer /></template>
      </Dlgdiv>

    </template>
    
  </FrameLayout>
</template>
<script>

import TodayInfo from './TodayInfo'
import BaseInfo from './BaseInfo'
import safeSituation from './safeSituation/index.vue'
import echartsExample from '../../components/echartsExample'
import Area from './Area.vue'
import Wind from './Wind'
import Water from './Water'
import Fire from './Fire.vue'
import DlgLayer from './DlgLayer'

import poiSafeC from '@/map/cesium/poi/poiSafe'

export default {
    name: '',
    components: {
        TodayInfo,
        BaseInfo,
        safeSituation,
        Area,
        Wind,
        Water,
        Fire,
        DlgLayer,
        echartsExample
    },

    mixins: [poiSafeC],
    data() {
        return {
            show: true,
            dataActive: 1
        }
    },
    beforeDestroy() {
        const resetSystem = [
            { name: '安全监控', show: true, sensorType: 'gas' },
            { name: '人员定位', show: true, sensorType: 'location' },
            { name: '视频监控', show: true, sensorType: 'video' },
            { name: '水害监测', show: false, sensorType: 'water' },
            { name: '火灾监测', show: false, sensorType: 'fire' },
            { name: '智能通风', show: false, sensorType: 'fan' },
            { name: '顶板监测', show: false, sensorType: 'roof' }
        ]
        this.$store.dispatch('poiSystem', resetSystem)
    },
    mounted() {

    },
    methods: {
        change(index) {
            this.dataActive = index
        }
    }
}
</script>

<style lang="scss" scoped>
.dateChange {
  --lineColor: #1b7193;
  span {
    color: #b4b4b4;
    margin: 0 5px;
    cursor: pointer;
  }
}
</style>
